<template>
  <div class="box">
    <div class="hint">
      <span class="iconfont icon-jinggao"> </span>
      <span>发布本条信息讲收费10.00元</span>
    </div>
    <div class="imgs">
      <!-- <button>
          添加图片
        </button> -->
      <div>
        <img
          :src="item.path"
          alt=""
          v-for="(item, index) in imgs"
          :key="index"
        />
        <span>
          <span @click="addimg" class="iconfont icon-add"></span>
        </span>
        <div>
          <p>上传图片</p>
        </div>
      </div>
    </div>
    <div class="content">
      <div>
        <div>
          <p>小区</p>
          <p>请选择小区</p>
        </div>
        <div>
          <span class="iconfont icon-right-copy"></span>
        </div>
      </div>
      <div>
        <div>
          <p>房产类型</p>
          <p>请选择</p>
        </div>
        <div>
          <span class="iconfont icon-right-copy"></span>
        </div>
      </div>
      <div>
        <div>
          <p>区域</p>
          <p>请选择</p>
        </div>
        <div>
          <span class="iconfont icon-right-copy"></span>
        </div>
      </div>
    </div>
    <div class="pay">
      <div @click="pay">发布并支付</div>
    </div>
  </div>
</template>

<script>
import { gobuy } from "../../service/buy";
import "../../static/font_2197595_yt2keqic52s/iconfont.css";
export default {
  data() {
    return {
      imgs: [],
    };
  },
  onShow() {},
  methods: {
    async pay() {
      let result = await gobuy({ total_fee: 1000 });

      let { timeStamp, nonceStr, paySign } = result.data;
      wx.requestPayment({
        timeStamp,
        nonceStr,
        package: result.data.package,
        signType: "MD5",
        paySign,
      });
    },
    addimg() {
      var that = this;
      wx.chooseImage({
        success(res) {
          console.log(res, this);
          that.imgs = [...that.imgs, ...res.tempFiles];
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 200rpx;
  height: 100rpx;
}
.hint {
  width: 100%;
  height: 100rpx;
  padding-left: 40rpx;
  line-height: 100rpx;
  background: #f8e1e7;

  span:nth-child(1) {
    color: red;
  }
  span:nth-child(2) {
    font-size: 34rpx;
    color: red;
  }
}
.imgs {
  > div {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    .icon-add {
      font-size: 100rpx;
      color: #ccc;
    }
  }
}
.content {
  > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10rpx 20rpx;
    border-bottom: 1rpx solid #ccc;
    > div:nth-child(1) {
      p:nth-child(1) {
        font-size: 32rpx;
        margin-bottom: 10rpx;
      }
      p:nth-child(2) {
        padding: 10rpx 0;
      }
    }
  }
}
.pay{
  padding: 10rpx 20rpx;
  div{
    background: #fe636b;
    text-align: center;
    color:#fff;
    padding: 30rpx;
    border-radius: 52rpx;
  }
}
</style>